<template>
  <div class="container">
    <div class="projectinfo"
         @click="toProjectDetail">
      <div class="lf">
        <img v-if="imgUrl&&image"
             :src="imgUrl+image"
             alt />
      </div>
      <div class="rt">
        <div class="projectname">{{project_name}}</div>
        <div class="hospitalname">{{hospital_name}}</div>
        <div class="bottom">
          <div class="price">
            <span class="yang">¥</span>
            {{origin_price}}
          </div>
        </div>
      </div>
    </div>
    <div class="appoint">
      <div>
        <div class="lf">预约时间</div>
        <picker class="picker"
                mode="date"
                :value="appointment_time"
                :start="startdate"
                :end="enddate"
                @change="bindDateChange">
          <span>{{appointment_time}}</span>
          <img class="arrowrt"
               src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
               alt />
        </picker>
      </div>
      <div class="margintop">
        <div class="lf">微信号</div>
        <input class="rt"
               v-model="wechat"
               type="text"
               placeholder="请输入微信号（选填）"
               placeholder-style="color:#999999"
               @input="clearEmoji" />
      </div>
      <div class="margintop">
        <div class="lf">推荐人</div>
        <input class="rt"
               v-model="ref_username"
               type="number"
               placeholder="请输入推荐人手机号（选填）"
               :disabled="isPhone"
               maxlength="11"
               @blur="referrerBlur" />
      </div>
    </div>
    <div class="discount"
         v-if="ticket_info">
      <div class="lf">
        优惠券
        <span class="tip">邀请有礼专享券</span>
      </div>
      <div class="rt">-¥{{origin_price}}</div>
    </div>
    <div class="countbox">
      <div>
        <div class="lf">项目价格</div>
        <div class="rt">￥{{origin_price}}</div>
      </div>
      <div class="margintop"
           v-if="ticket_info">
        <div class="lf">优惠券抵扣</div>
        <div class="rt">￥{{origin_price}}</div>
      </div>
    </div>
    <div class="footer">
      <!-- 底部text -->
      <div class="texttip">
        <icon class="icon-small"
              color="#F59D61"
              type="info_circle"
              size="16"></icon>预约成功后，客服会在您预约的前一天联系您
      </div>
      <!-- 提交订单 -->
      <div class="buybar"
           :class="{'isX':isIPhoneX}">
        <div class="totalbox">
          <div class="total">合计：</div>
          <div class="money">
            <span class="yang">¥</span>
            {{amount}}
          </div>
          <div class="buybtn"
               @click="submitBooking">提交预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import fly from "@/assets/js/fly.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response, //http图片
      isIPhoneX: false, //是否是isIPhoneX
      appointment_time: "请选择预约时间", //预约时间
      startdate: "", //有效日期范围的开始
      enddate: "", //有效日期范围的结束
      wechat: "", //微信号
      isPhone: false, //推荐人手机号是否可编辑(暂时写死不可编辑)
      project_name: "", //项目名称
      image: "", //图片
      hospital_name: "", //医院名称
      origin_price: "", //价格
      ref_username: "", //推荐人
      ticket_info: "", //卡券信息
      amount: 0, //合计
      project_id: "", //项目id
      ticket_id: "" //卡券id
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "确认预约"
    });
    this.startdate = new Date().Format("yyyy-MM-dd");
    //获取系统信息
    let that = this;
    wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        if (res.model.search("iPhone X") != -1) {
          that.isIphoneX = true;
        }
      }
    });
    // 获取参数
    if (options.project_id) {
      this.project_id = options.project_id;
    }
    if (options.ticket_id) {
      this.ticket_id = options.ticket_id;
    }
    // 获取预约详情
    this.getAppointData();
  },
  onShow () { },
  methods: {
    // 获取预约详情数据
    getAppointData () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/act/appointment/detail",
        {
          project_id: this.project_id,
          ticket_id: this.ticket_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.project_name = res.data.project_name || "";
            this.image = res.data.image || "";
            this.hospital_name = res.data.hospital_name || "";
            this.origin_price = res.data.origin_price || "";
            this.ref_username = res.data.ref_username || "";
            this.ticket_info = res.data.ticket_info || "";
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 查看项目详情(纯查看，详情内不做任何交互)
    toProjectDetail () {
      // isApoint true标记从邀请有礼确认预约跳转入项目详情
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${
          item.id
          }&isApoint=true`
      });
    },
    //   选择预约时间
    bindDateChange (e) {
      this.appointment_time = e.target.value;
    },
    // 微信号禁止特殊符号
    clearEmoji () {
      // 禁止输入表情
      this.wechat = this.wechat.replace(
        /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,
        ""
      );
      //禁止输入中文
      this.wechat = this.wechat.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "");
    },
    // 提交预约
    submitBooking () {
      let that = this;
      if (!wx.getStorageSync("user_token")) {
        wx.navigateTo({ url: "/pages/package_main/login/main" });
      }
      if (!this.appointment_time || this.appointment_time == "请选择预约时间") {
        common.mmk_Loading(2, "您有未填写的内容，请填写完整");
        return;
      }
      this.getdingyueMsg();
    },
    // 授权订阅消息->获取下发权限
    getdingyueMsg () {
      let that = this;
      let pushReservationTmplIds =
        "hxPS0UhAwuTX6fApVgvLOkDS7VKvYhxcGPX-wRo3Mlo";
      // 查询用户设置
      wx.getSetting({
        withSubscriptions: true,
        success (res) {
          let {
            mainSwitch = false, //订阅消息总开关
            itemSettings = {} //每一项开关
          } = res.subscriptionsSetting;
          //消息订阅总开关开启
          if (mainSwitch) {
            console.log(itemSettings);
            if (itemSettings[pushReservationTmplIds] === "accept") {
              // 不再弹窗授权，直接提交
              that.submit(1);
            } else {
              // 授权订阅消息弹窗弹起
              wx.requestSubscribeMessage({
                tmplIds: [pushReservationTmplIds],
                success: res => {
                  if (res[pushReservationTmplIds] === "accept") {
                    wx.showToast({
                      title: "消息订阅成功啦",
                      icon: "success",
                      duration: 2000
                    });
                    that.submit(1);
                  } else {
                    console.log("拒绝推送订阅消息或接口被禁用");
                    that.submit();
                  }
                }
              });
            }
          } else {
            //引导用户，手动引导用户去设置页开启
            wx.showModal({
              title: "提示",
              content:
                "检测到您没有开启订阅消息的权限，可以打开设置勾选订阅消息",
              success (res) {
                if (res.confirm) {
                  //用户点击了确定按钮，进入设置页的回调
                  wx.openSetting({
                    success: res => { },
                    fail: res => { }
                  });
                } else {
                  //用户点击了拒绝按钮
                  that.submit();
                }
              }
            });
          }
        }
      });
    },
    // 提交
    submit (canSend = 0) {
      common.mmk_Loading(0);
      common.fly_post(
        "api/act/appointment/submit",
        {
          project_id: this.project_id,
          ticket_id: this.ticket_id,
          appointment_time: this.appointment_time,
          type: 3, //预约类型：1.app预约，3.主小程序预约
          wechat: this.wechat
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            // 赠送项目无需支付，点击直接跳转支付成功
            wx.redirectTo({
              url: "/pages/package_projects/booking_success/main"
            });
            // 允许接受订阅消息，下发消息
            canSend == 1 && this.senddingyueMsg(res.appoint_id);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 调用下发消息模版接口
    senddingyueMsg (appoint_id) {
      common.fly_post(
        "api/v4_5/minapp/sub",
        {
          user_jwt: wx.getStorageSync("open_id"),
          appoint_id: appoint_id
        },
        response => { }
      );
    },
    // 推荐人手机号是否可编辑(暂时未用)
    referrerNum () {
      if (!wx.getStorageSync("user_data").referee_phone) {
        this.isPhone = false; //没有服务商号码
      } else {
        this.isPhone = true;
        this.ref_username = wx.getStorageSync("user_data").referee_phone;
      }
    },
    // 推荐人手机号(暂时未用)
    referrerBlur () {
      let re = /^[1][2,3,4,5,6,7,8][0-9]{9}$/;
      if (!re.test(this.ref_username)) {
        wx.showToast({
          title: "请输入正确的手机号",
          icon: "none",
          duration: 2000,
          mask: true
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.modularCommon {
  margin: 10px 10px 0;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  box-sizing: border-box;
}
.rtfont {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.container {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  padding-top: 10px;
  box-sizing: border-box;
  .projectinfo {
    .modularCommon;
    margin-top: 0;
    display: flex;
    box-sizing: border-box;
    .lf {
      flex-shrink: 0;
      width: 114px;
      height: 114px;
      border-radius: 6px;
      margin-right: 10px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .rt {
      flex: 7;
      position: relative;
      .projectname {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .hospitalname {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .price {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 20px;
          .yang {
            font-size: 12px;
            margin-right: 1px;
          }
        }
      }
    }
  }
  .appoint {
    .modularCommon;
    div {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .lf {
        width: 66px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .picker {
        flex: 1;
        .rtfont;
        position: relative;
        .arrowrt {
          width: 24px;
          height: 24px;
          position: absolute;
          right: 0;
          top: -2px;
        }
      }
      .rt {
        flex: 1;
        .rtfont;
      }
      &.margintop {
        margin-top: 22px;
      }
    }
  }
  .discount {
    .modularCommon;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lf {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(29, 29, 29, 1);
      line-height: 20px;
      span {
        margin-left: 4px;
        display: inline-block;
        background: #ffedf3;
        border-radius: 2px;
        padding: 2px 1px;
        text-align: center;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3EB0A9;
        box-sizing: border-box;
      }
    }
    .rt {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 56, 62, 1);
      line-height: 20px;
    }
  }
  .countbox {
    .modularCommon;
    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .lf {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 16px;
      }
      .rt {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 16px;
      }
      &.margintop {
        margin-top: 12px;
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .texttip {
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(245, 157, 97, 1);
      line-height: 17px;
      margin-bottom: 12px;
      icon {
        margin-right: 3px;
        position: relative;
        top: 4px;
      }
    }
    .buybar {
      height: 50px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px -4px 10px 0px rgba(229, 229, 229, 0.48);
      padding: 5px 10px;
      box-sizing: border-box;
      z-index: 999;
      .totalbox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .total {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
        }
        .money {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 20px;
          margin-left: 2px;
          .yang {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 16px;
          }
        }
        .buybtn {
          width: 106px;
          height: 38px;
          background: linear-gradient(
            226deg,
            rgba(254, 120, 161, 1) 0%,
            rgba(254, 123, 136, 1) 100%
          );
          border-radius: 100px;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 38px;
          margin-left: 10px;
        }
      }
      &.isX {
        height: 83px;
      }
    }
  }
}
</style>